<template>
  <div class="shop">
    <header>
      <van-nav-bar
        title="购物车"
        left-text="返回"
        right-text=""
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
    </header>
    <section class="shopnull" v-if="false">
      <van-empty
        class="custom-image"
        image="https://www.ourqm.com/views/mobile_fun/skin/default/new/images_2017/icon/shopping-cart.png"
        description="还没有添加商品哦~"
      />
    </section>
    <section class="list">
      <ul>
        <li v-for="(item, index) in list" :key="index">
          <div class="box">
            <div class="box-l">
              <div class="t-left">
                <van-checkbox
                  v-model="item.checked"
                  @click="onCheck"
                  icon-size="20px"
                  checked-color="#ee0a24"
                ></van-checkbox>
              </div>
              <div class="t-right">
                <div class="timg">
                  <img src="../../assets/pic3.jpg" alt="" />
                </div>
                <div class="tname">
                  <div class="phonename">
                    <p>{{ item.name }}</p>
                    <p>{{ item.sel }}</p>
                  </div>
                  <div class="price">￥{{ item.price / 100 }}</div>
                </div>
              </div>
            </div>
            <div class="box-r">
              <div class="t-del">
                <van-icon name="delete-o" @click="onDel(index)"/>
              </div>
              <div class="b-num">
                <van-stepper v-model="item.num" />
              </div>
            </div>
          </div>
        </li>
      </ul>
    </section>
    <!-- <div class="ood">{{resultPrice}}1232</div> -->
    <footer>
      <van-submit-bar :price="result" button-text="去结算" @submit="onSubmit">
        <van-checkbox
          v-model="checked"
          checked-color="#ee0a24"
          @click="onAllcheck"
          >全选</van-checkbox>
        
      </van-submit-bar>
    </footer>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      checked: true,
      value: 1,
      list: [],
      result: 0,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push({ path: "/m" });
    },
    onClickRight() {
      Toast("按钮");
    },
    //去结算
    onSubmit() {
      
      let chooseall = [];
      this.list.forEach(item=>{
        if(item.checked){
          chooseall.push(item)
        }
      })
      if(chooseall.length==0){
        Toast("您还没有选择宝贝哦~");
        return
      }
      localStorage.setItem("payment",JSON.stringify(chooseall))
      console.log(chooseall);
      this.$router.push({ path: "/payment" });
    },
    //删除商品
    onDel(num){
      console.log(num);
      let arr = []
      this.list.forEach((item,index)=>{
        if(num != index){
          arr.push(item)
        }
      })
      // console.log(arr);
      this.list =arr
      localStorage.setItem("shop",JSON.stringify(arr))
    },
    //渲染购物车列表
    initcart() {
      let list = JSON.parse(localStorage.getItem("shop"));
      console.log(list);
      this.list = list;
    },
    //选择商品
    onCheck(index, ch) {
      // console.log(index,ch);
      this.list.forEach((item) => {
        if (item.checked == false) {
          this.checked = false;
        } else {
          this.checked = true;
        }
      });
    },
    //是否全选
    onAllcheck() {
      let bol = this.checked;
      if (bol) {
        this.list.forEach((item) => {
          item.checked = true;
        });
      } else {
        this.list.forEach((item) => {
          item.checked = false;
        });
      }
    },
    
  },
  created() {
    this.initcart();
  },
  mounted() {},
  computed: {
    resultPrice() {
      let result=0
      this.list.forEach(item=>{
          if(item.checked){
            result+=item.num*item.price
          }
      })
      return result;
    },
  },
  watch: {
    resultPrice(newValue, oldValue) {
      // console.log(newValue);
      this.result =newValue;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/static/css/base.scss";
@import "@/static/css/shop.scss";
.custom-image .van-empty__image {
  width: 90px;
  height: 90px;
}
.shopnull {
  margin-top: 100px;
}
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
.ood {
  height: 100px;
  width: 100%;
  background-color: antiquewhite;
  color: #999;
}
</style>